import React from 'react'
import styles from  './hdb-swiper.module.css';
import Swipe from './js/swipe'
import $ from 'jquery'
import propsTypes from 'prop-types'
import {withRouter} from 'react-router-dom'

class HdbSwiper extends React.Component{
    //props:data={id,title,sub_title,banner}
    //props:to={pathname,apiname}
    static defaultProps={

    }
    static propTypes={
        data:propsTypes.arrayOf(propsTypes.shape({
            id:propsTypes.number.isRequired,
            title:propsTypes.string,
            sub_title:propsTypes.string,
            banner:propsTypes.string.isRequired,
        })).isRequired,
        to:propsTypes.shape({
            pathname:propsTypes.string.isRequired,
            apiname:propsTypes.string.isRequired,
        })
    }


    componentDidUpdate() {
        new Swipe($(`.${styles.banner}`)[0],{
            auto:2000,
            continuous:true,
            stopPropation:true,
            callback:function (index,element){
                $('.banner ol li').removeClass('active');
                $('.banner ol li').eq(index).addClass('active');
            }
        })
    }
    to = (id) => {
        if (!this.props.to) return;//to 不存在 ， 后续点击无动作
        // alert('跳转')
        let {history,to:{pathname,apiname}} = this.props;//深度结构
        history.push({pathname:`${pathname}/${id}`,search:`apiname=${apiname}`})
    };


    render() {
        let { data }=this.props
        return(
            <div className={styles.banner}>
                <ul className="clearfix">
                    {
                        data.map(item=>(
                            <li key={item.id} onClick={()=>this.to(item.id)}>
                                <img src={item.banner} alt=""/>
                                <div className={styles["text-box"]}>
                                    <h2>{item.title}</h2>
                                    <p>{item.sub_title}</p>
                                </div>
                            </li>
                        ))
                    }
                </ul>

            </div>
        )
    }

     /* render() {
        return(
            <div className={styles.banner}>
                 <ul className="clearfix">
                    <li><img src={img1} alt=""/>
                       <div className={styles['text-box']}>
                            <h2>还可以降低首付款健身房11111</h2>
                           <p>刘德华11 / 文</p>
                        </div>
                    </li>
                   <li><img src={img2} alt=""/>
                     <div className={styles['text-box']}>
                           <h2>还可以降低首付款健身房2222</h2>
                           <p>刘德华22 / 文</p>
                       </div>
                   </li>
                  <li><img src={img3} alt=""/>
                      <div className={styles['text-box']}>
                          <h2>还可以降低首付款健身房333</h2>
                        <p>刘德华33 / 文</p>
                       </div>
                    </li>
               </ul>

           </div>
         )
    }*/
  }

export default withRouter(HdbSwiper)